<template>
<div>


  <div class="back">
    <div class="login">
    <div class="login_">
    
  
      <img src="../../../public/moder/tx.png" alt="" class="tx" >

      <div class="pass">
      <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户"
    label=""
    placeholder="请输入用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label=""
    placeholder="请填写密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="fun()"> 登录/注册 </van-button>
  </div>
</van-form>
      </div>

   
   

         <img src="../../../public/moder/na.png" alt="" class="imgs">

     <div class="tz">
          <p @click="fun1()">注册</p>  | <p>忘记密码</p> | <p>切换用户</p>
     </div>

    </div>

    <h4 class="foot">更多</h4>

   </div>




  </div>
</div>
</template>

<script>
export default {
 data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
  },
   methods:{
        fun(){
          
            this.$router.push("/homes")
        },
        fun1(){
        this.$router.push("/login")
        }
    }
}
</script>

<style lang="less" scoped>
.tz{
  width:2.5rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  font-size: .14rem;
}
.pass{
  margin-top:.5rem ;
  margin-bottom:.3rem ;
}
.tx{
  display: block;
  width: .65rem;
  height: .65rem;
  position: relative;
  left: 43%;
  top: -0.3rem;
  border-radius:50% ;
  

}

.back{
width: 100%;
height: 6.66rem;
overflow: hidden;
background-image:linear-gradient(to bottom ,#376db3,#f0f4f9)

}
.foot{
  font-size: .14rem;
  text-align: center;
  margin-top: .45rem;
  color: #000;
  
}
.imgs{
  display: block;
  width: 1.6rem;
  height: .35rem;
  margin:  .6rem  auto;
}
  .ok{
    width: 100%;
    height: .45rem;
    background-color: #7da4cf;
    font-size: 16px;
    font-weight: 600;
    color: white;
    line-height: .45rem;
    text-align: center;
    margin:.1rem  0;
  }
 .no{
    font-size: .14rem;
 }
 .no p:first-child{
  color: #a4a4a4;
  line-height: .18rem;
  input{
    vertical-align: middle;
  }
 }
 .no p:nth-child(n+2){
 color: #547bbc;
 line-height: .2rem;
 font-weight: 600;
 }

  .login{
    width: 94%;
    margin: auto;
    height: 4.8rem;
     background-color: white;
     margin-top:0.7rem ;
 
    


  }
 .login_{
    width: 90%;
    margin: auto;
    height: 4.8rem;
    position: relative;
   
   
    // margin-top:1rem ;
    
 
    h4{
         font-size: .24rem;
         margin-bottom:60px ;
    }
  
 }

</style>